<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="inc :: header('房源管理')"/>
</head>
<body>

<table id="table" lay-filter="table"></table>

<script type="text/html" id="activeBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增数据</button>
    </div>
</script>
<script th:inline="none">
    layui.use('table',function(){
        var tb = layui.table;
        tb.render({
            elem:'#table',
            url:'/hc/find',
            cols:[
                [
                    {type:'checkbox',flex:'left'},
                    {field:'homes',title:'房源',width:250,
                        templet:function(res){
                            return res.xqName+"-"+res.lhName+res.fhName;
                        }
                    },
                    {field:'area',title:'房源面积',width:100,align:'center',
                        templet:function(res){
                            if(res.area!=undefined){
                                return res.area+"m<sup>2</sup>";
                            }
                        }
                    },
                    {field:'useArea',title:'使用面积',width:120,
                        templet:function(res){
                            if(res.useArea!=undefined){
                                return res.useArea+"m<sup>2</sup>";
                            }
                        }
                    },
                    {field:'hx',title:'户型',width:150},
                    {field:'jzjg',title:'建筑结构',width:150},
                    {field:'type',title:'租赁性质',width:100},
                    {field:'status',title:'状态',width:100},
                    {field:'buildDate',title:'建成时间',width:150},
                    {fixed:'right',title:'操作',width:150,toolbar:'#activeBar'}
                ]
            ],
            title:'数据表格',
            page:true,
            height: 'full-0',
            toolbar:'#toolbar',
            defualtToolbar:['filter','exports']
        });

        //顶部工具条按钮事件
        tb.on('toolbar(table)',function(obj){
            switch (obj.event){
                case 'add':
                    openDig('新增房源信息','');
                    break;
            }
        });
        //操作列的按钮事件
        tb.on('tool(table)',function(obj){
            var row = obj.data;//获取点击行的一行数据
            switch (obj.event){
                case 'edit':
                    openDig('编辑房源信息',row.id);
                    break;
                case 'del':
                    //确认框
                    layer.confirm('真的要删除该行吗？',function(index){
                        $.ajax({
                            type:'get',
                            url:'/hc/remove?id='+row.id,
                            dataType: 'json',
                            success:function (result) {
                                alert(result.msg);
                                if(result.is){
                                    obj.del();
                                    layer.close(index);
                                }
                            }
                        });

                    });
                    break;
            }
        });

    });

    function openDig(title,id){
        var url = '/hc/add';
       if(id!=''){
           id = '?id='+id;
           url = '/hc/edit';
       }
       var open = layer.open({
            title:title,
            type:2,//默认是0-信息框，1-页面，2-iframe,3-加载层，4-tip层
            maxmin:true,
            offset:'auto',
            content:'/hc/addEdit'+id,
            area:['70%','80%'],
            anim:6,
            btn:['确认保存','取消关闭'],
            yes:function(index,layero){
                //获取表单
                var f = layer.getChildFrame('form',index);
                //获取表单的数据
                var data = f.serialize();
                //执行ajax提交数据
                $.ajax({
                    type:'post',//提交方式
                    url:url,//提交的地址
                    data:data,//提交的数据，
                    dataType:'json',//提交成功后，后台返回值的数据类型封装
                    success:function(result){
                        alert(result.msg);
                        if(result.is){
                            //关闭窗口
                            layer.close(index);
                            //刷新表格
                            layui.table.reload('table');
                        }
                    }
                });

            },
            btn2:function(){
                alert('取消关闭');
            }
        });
       //layer.full(open);
    }
</script>


</body>
</html>
